
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
body{
  height: 100%;
}
.captcha {
  position: relative;
  display: inline-block;
}
#captcha-input {
  width: 100px;
  height: 30px;
  font-size: 14px;
  padding: 5px;
  margin-left: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#captcha-canvas {
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
</style>

<div class="captcha">
  <input type="text" id="captcha-input" placeholder="请输入验证码">
  <canvas id="captcha-canvas"></canvas>
</div>


<div style="height: 100%; display: flex; justify-content: center; align-items: center;">
<form class="layui-form" action="/admin/sessions/login_admin_user">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 10px;">
            <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
      <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
    </div>
    <div class="layui-form-item demo-login-other">
      <label>社交账号登录</label>
      <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
      或 <a href="#reg">注册帐号</a></span>
    </div>
  </div>
</form>
</div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.2/dist/layui.js"></script>
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo-login)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});

$(function() {
  // 生成随机验证码
  function createCode() {
    var code = "";
    var codeLength = 4; // 验证码长度
    var randomArr = new Array(
      "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
      "k", "l", "m", "n", "o", "p", "q", "r", "s", "t",
      "u", "v", "w", "x", "y", "z", "0", "1", "2", "3",
      "4", "5", "6", "7", "8", "9"
    );
    for (var i = 0; i < codeLength; i++) {
      var index = Math.floor(Math.random() * randomArr.length);
      code += randomArr[index];
    }
    return code;
  }

  // 画验证码
  function drawCode() {
    var canvas = document.getElementById("captcha-canvas");
    var ctx = canvas.getContext("2d");
    var code = createCode();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = "bold 20px Arial";
    for (var i = 0; i < code.length; i++) {
      ctx.fillStyle = "#"+((1<<24)*Math.random()|0).toString(16); // 生成随机颜色
      ctx.fillText(code[i], 20 + i * 20, 25 + Math.random() * 10 - 5); // 绘制验证码字符
    }
    // 画干扰线
    for (var i = 0; i < 6; i++) {
      ctx.strokeStyle = "#"+((1<<24)*Math.random()|0).toString(16); // 生成随机颜色
      ctx.beginPath();
      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.stroke();
    }
    return code;
  }

  // 初始化验证码
  var code = drawCode();

  // 点击验证码刷新
  $("#captcha-canvas").click(function() {
    code = drawCode();
  });

  // 验证码输入框校验
  $("#captcha-input").blur(function() {
    if ($(this).val().toLowerCase() != code.toLowerCase()) {
      layer.msg("验证码错误");
      code = drawCode
</script>